<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>内容与属性操作</title>
    <style type="text/css">
        * {
            margin-top: 3px;
        }
        
        #div1 {
            width: 500px;
            height: 300px;
            border: #238FCE solid 5px;
        }
    </style>
    <script>
        window.addEventListener('load', function() {
            var inputs = document.querySelectorAll('input');
            var p = document.querySelector('p');
            var div1 = document.querySelector('#div1');
            var textbox = document.querySelector('.textbox');
            inputs[0].addEventListener('click', function() {
                alert(p.innerText);
            });
            inputs[1].addEventListener('click', function() {
                alert(p.innerHTML);
            });
            inputs[2].addEventListener('click', function() {
                p.innerText = '修改了';
            });
            inputs[3].addEventListener('click', function() {
                alert(div1.innerText);
            });
            inputs[4].addEventListener('click', function() {
                alert(textbox.value);
            });
            inputs[5].addEventListener('click', function() {
                textbox.value = '修改value值';
            });
            inputs[6].addEventListener('click', function() {
                alert(textbox.getAttribute('index'));
            });
            inputs[7].addEventListener('click', function() {
                textbox.setAttribute('index', 'index属性改了');
                alert(textbox.getAttribute('index'));
            });
            // 删除属性
            inputs[8].addEventListener('click', function() {
                textbox.removeAttribute('index');
            });
        });
    </script>
</head>

<body>
    <h3>内容与属性操作</h3>
    <input type="button" value="获取p标签内容(innerText)" id="btn1" />
    <input type="button" value="获取p标签内容(innerHTML)" id="btn2" />
    <input type="button" value="设置p标签内容" id="btn3" />
    <input type="button" value="获取#div1的内容(textContent)" id="btn4" />
    <br/>
    <br/>
    <input type="button" value="获取文本框属性值" id="btn5" />
    <input type="button" value="设置文本框属性" id="btn6" />
    <br/>
    <input type="button" value="获取文本框属性getAttribute" id="btn7" />
    <input type="button" value="设置文本框属性setAttribute" id="btn8" />
    <input type="button" value="删除属性" id="btn9" />

    <br /><br />
    <!-- 测试的元素 -->
    <p><strong>请输入你的姓名：</strong></p>
    <input type="text" value="别问我是谁!" index='3322' class="textbox" />
    <div id="div1">
        innerHTML在使用时会保持编写的格式以及标签样式。 innerText则是去掉所有格式以及标签的纯文本内容。 textContent属性在去掉标签后会保留文本格式。
    </div>


</body>

</html>